<template>
	<view class="content">
		<uni-nav-bar fixed left-icon="left" @clickLeft="backHandle" class="unibarS">
			<view class="input-view">
				<u-search placeholder="搜索关键字" v-model="params.keyword" @search="searchHandle" shape="square" actionText="取消" @custom="customHandle" :actionStyle="{ color: 'rgba(77, 172, 177, 1)' }"></u-search>
			</view>
		</uni-nav-bar>
		<view class="type-box">
			<u--image :src="'/static/img/crm/often_1.png'" width="96rpx" height="96rpx"></u--image>
			<view class="type-name">
				<view class="type-title">订单</view>
				<view class="type-num">共{{ total }}个结果</view>
			</view>
		</view>
        <view v-if="list.length" class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="goOrderDetails(item)">
                <view class="item-top">
                    <view class="item-top-left">
                        <view class="name">订单编号：{{ item.orderNumber }}</view>
                        <view class="rate">订单金额：¥{{ item.orderTotalAmount }}</view>
                        <view class="time">客户姓名：{{ item.customerName }}</view>
                    </view>
                    <view class="item-top-right">
                        <view class="state" :style="{ color: getColor(item.orderStatus) }">{{ bus_order_status[item.orderStatus] }}</view>
                        <view style="display: flex; flex-direction: column; align-items: center;">
                            <u-avatar :src="item.avatar"></u-avatar>
                            <view class="salesman">{{ item.businessManager }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else></empty-view>
	</view>
</template>
<script>
import { convertToDict } from '@/common/utils'
export default {
	data() {
		return {
            params: {
				keyword: '',
				pageNum: 1,
				pageSize: 20
			},
            total: 0,
			status: 'loading',
            list: [],
		}
	},
	onLoad: function (options) {
		this.bus_order_status = convertToDict(JSON.parse(uni.getStorageSync('bus_order_status')))
		
        if(options.keyword) {
			this.params.keyword = options.keyword
			this.getData()
		} else {
			this.getData()
		}
    },

	onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},

	methods: {
        searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
		customHandle() {
			this.params.keyword = ''
			this.searchHandle()
		},
        getData() {
			this.$http.get('/app/order/list', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
		getColor(state) {
            let color;
            switch (state) {
                case '1001':
                color = 'rgba(103, 117, 133, 1)';
                break;
                case '1002':
                color = 'rgba(0, 186, 173, 1)';
                break;
                case '1003':
                color = 'rgba(255, 141, 26, 1)';
                break;
                case '1004':
                color = 'rgba(255, 141, 26, 1)';
                break;
                case '1005':
                color = 'rgba(255, 141, 26, 1)';
                break;
                case '1006':
                color = 'rgba(255, 0, 28, 1)';
                break;
                default:
                color = 'rgba(103, 117, 133, 1)';
            }
            return color;
        },
		backHandle() {
            uni.navigateBack()
        },
	}
}
</script>

<style lang="scss" scoped>

.unibarS {
	/deep/.uni-navbar__header {
		padding: 0 32rpx;
	}

	/deep/.uni-navbar__content {
		border-bottom: none !important;
		box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
	}

	/deep/.uni-navbar__header-btns-left {
		width: 20px !important;
	}
	/deep/.uni-navbar__header-btns-right {
		display: none;
	}
}

.input-view {
	width: 100%;
    display: flex;
    align-items: center;
	/deep/.u-tabs__wrapper__nav__item {
		flex: 1;
	}
	/deep/.u-tabs__wrapper__nav__line {
		background: rgba(77, 172, 177, 1) !important;
	}
}

.type-box {
	display: flex;
	padding: 0 32rpx;
	margin: 32rpx 0;
	.type-name {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
		.type-title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(12, 16, 25, 1);
		}
		.type-num {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(103, 117, 133, 1);
		}
	}
}

.list {
	padding-bottom: 32rpx;
}

.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;

    .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-top-left {
            flex: 1;
            margin-right: 20rpx;
            width: 0;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-bottom: 32rpx;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rate,
            .time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
                margin-bottom: 26rpx;
            }
        }

        .item-top-right {
            width: 130rpx;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
            text-align: right;

            .state {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(0, 186, 173, 1);
                margin-bottom: 20rpx;
            }

            .salesman {
                margin-top: 8rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                width: 100%;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

</style>
